<template>
  <div id="jobPage">
    <div class="page">
      <div class="el-pagination is-background">
        <ul class="el-pager">
          <template
            v-if="
              (tableData.length > 0 && tableData[0].jobUncheckedCount) ||
                (tableData.length > 0 && tableData[0].jobListCount)
            "
          >
            <li>
              共
              {{ tableData[0].jobUncheckedCount || tableData[0].jobListCount }}
              条
            </li>
          </template>
          <li v-if="hasTotal">
            共 <span v-loading="pageLoading">{{ total }}</span> 条
          </li>
          <el-select
            @change="handleSizeChange"
            v-model="searchParams.pageSize"
            placeholder="请选择"
          >
            <el-option
              v-for="item in pageSetList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <li class="number active" @click="changePage('pre')">上一页</li>
          <li class="number">当前第 {{ searchParams.pageNum }} 页</li>
          <li class="number active" @click="changePage('next')">下一页</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'jobPage',
  msg: '',
  props: {
    searchParams: {
      type: Object,
      default() {
        return {}
      }
    },
    tableData: {
      type: Array,
      default() {
        return []
      }
    },
    hasTotal: {
      type: Boolean,
      default() {
        return false
      }
    },
    pageLoading: {
      type: Boolean,
      default() {
        return false
      }
    },
    total: {
      type: Number,
      default() {
        return 0
      }
    }
  },
  data() {
    return {
      pageSetList: [
        {
          value: 10,
          label: '10条/页'
        },
        {
          value: 25,
          label: '25条/页'
        },
        {
          value: 50,
          label: '50条/页'
        }
      ]
    }
  },
  mounted() {},
  methods: {
    /* 更改条数 */
    handleSizeChange(val) {
      this.searchParams.pageSize = val
      this.$emit('changePage')
    },
    /* 换页 */
    changePage(type) {
      let pageNum = this.searchParams.pageNum
      let pageSize = this.searchParams.pageSize
      if (type === 'pre') {
        //上一页
        if (this.searchParams.pageNum === 1) {
          this.$message.warning('当前是第一页')
          return
        }
        this.searchParams.pageNum--
      } else {
        //下一页
        let curTot = pageSize * (pageNum - 1) + this.tableData.length
        if (pageNum * pageSize > curTot || this.tableData.length === 0) {
          this.$message.warning('没有数据了')
          return
        }
        this.searchParams.pageNum++
      }
      this.$emit('changePage')
    }
  }
}
</script>

<style lang="less">
#jobPage {
  .page {
    .el-pager li.active {
      cursor: pointer;
      &:hover {
        background-color: #4ad3b6 !important;
        color: #fff;
      }
    }
    .el-input__inner {
      height: 29px;
    }
    .el-input__icon {
      line-height: 29px;
    }
  }
}
</style>
